<script setup lang="ts">
import type { DialogProps } from './type.ts'

/**
 * 接收父组件传递的数据
 * withDefaults: 设置默认值
 * defineProps： 接收父组件传递参数
 */
const props = withDefaults(defineProps<DialogProps>(), {
  title: '标题',
  visible: false,
  width: 600,
  height: 260,
})

// 注册事件(自定义事件)  子传父
const emit = defineEmits(['onClose', 'onConfirm'])

// 关闭弹窗
const onClose = () => {
  emit('onClose')
}

// 确定弹窗
const onConfirm = () => {
  emit('onConfirm')
}
</script>

<template>
  <!--
  before-close： 关闭前的回调
  append-to-body: 嵌套的 Dialog 必须指定该属性并赋值为 true (默认false)
  -->
  <el-dialog :model-value="props.visible"
             :title="props.title"
             :width="props.width + 'px'"
             :before-close="onClose"
             append-to-body
             :close-on-click-modal="false">
    <!--展示内容-->
    <div class="container"
         :style="{height:props.height + 'px'}">
      <slot name="content"></slot>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger"
                   @click="onClose">取消</el-button>
        <el-button type="primary"
                   @click="onConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style  lang="scss">
.container {
  overflow-x: initial;
  overflow-y: auto;
}

.el-dialog {
  border-top-left-radius: 7px !important;
  border-top-right-radius: 7px !important;
  padding: 0;
  .el-dialog__header {
    margin-right: 0;
    border-top-left-radius: 7px !important;
    border-top-right-radius: 7px !important;
    background-color: #009688 !important;
    padding-top: 13px;
    padding-bottom: 13px;
    .el-dialog__title {
      color: #fff;
      font-size: 16px;
      font-weight: 600;
      margin-left: 10px;
    }
  }
  .el-dialog__headerbtn {
    .el-dialog__close {
      color: #fff;
    }
  }
  .el-dialog__body {
    padding: 10px;
  }
  .el-dialog__footer {
    border-top: 1px solid #e8eaec !important;
    padding: 10px;
  }
}
</style>
